<template>
  <div >
    <div class="body">
      <vue-particles
          color="#fff"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="4"
          linesColor="#fff"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
      >
      </vue-particles>
      <!--中间框-->
      <div class="conbox">
        <!--logo-->
        <div class="logo">
          <img src="../assets/img/logo.png" alt />
          <div>{{$t('index.title')}}</div>
        </div>

        <div class="smbox">
          <!-- 切换语言 -->
          <div class="toggle">
            <a-select :defaultValue="defaultValue" @change="handleChange">
              <a-select-option value="cn">{{ $t('index.chinese') }}</a-select-option>
              <a-select-option value="en">{{ $t('index.english') }}</a-select-option>
              <a-select-option value="ja">{{ $t('index.Japanese') }}</a-select-option>
            </a-select>
            <a-button @click="change" style="margin-left: 10px">{{ $t('index.change') }}</a-button>
          </div>

          <!--表单-->
          <div v-show=true class="a-form-itembox" id="loginDiv">
            <a-form-model   :model="form" :rules="rules" ref="ruleForm">
              <a-form-model-item class="Item"  >
                <div class="title">{{$t('index.login')}}</div>
              </a-form-model-item>
              <a-form-model-item class="Item inputbox" prop="account">
                <a-input
                    v-model="form.account"
                    :placeholder="$t('index.username')"
                    size="large"
                >
                  <a-icon
                      slot="prefix"
                      type="user"
                      :style="{ fontSize: '16px', color: '#0088cc' }"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item class="Item inputbox" prop="password">
                <a-input
                    v-model="form.password"
                    :placeholder="$t('index.password')"
                    size="large"
                    type="password"
                    v-decorator="['password', { rules: [{ required: true, message: this.$t('index.tipOfPassword')  }] }]"
                >
                  <a-icon
                      slot="prefix"
                      type="key"
                      :style="{ fontSize: '16px', color: '#0088cc' }"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item class="Item" prop="code">
                <div class="inputsmbox">
                  <a-input
                      v-model="form.code"
                      :placeholder="$t('index.code')"
                      size="large"
                      v-decorator="['code', { rules: [{ required: true, message: this.$t('index.tipOfCode') }] }]"
                  >
                    <a-icon
                        slot="prefix"
                        type="security-scan"
                        :style="{ fontSize: '16px', color: '#0088cc' }"
                    />
                  </a-input>
<!--                  验证码-->
                  <img  style="margin-left: 10px" id="img" alt="验证码" onclick="this.src='http://localhost:9001/createImageCode?d='+new Date()*1" src="http://localhost:9001/createImageCode" />
                </div>

              </a-form-model-item>
              <a-form-item class="Item inputbox">
                <a-button
                    type="primary"
                    html-type="submit"
                    class="btn"
                    size="large"
                    @click="onSubmit"
                >{{$t('index.sure')}}</a-button>
              </a-form-item>
            </a-form-model>
            <div style="text-align: center">
              <router-link to='getEmail'>
                <a>{{$t('index.fw')}}</a>
              </router-link>
            </div>
          </div>

          <!--表单-->
          <div v-show=false class="a-form-itembox" style="" id="registerDiv">
            <a-form-model   :model="form1" :rules="rules1" ref="ruleForm1" >
              <a-form-model-item class="Item">
                <div class="title">{{$t('index.register')}}</div>
              </a-form-model-item>
              <!--              姓名，账户-->
              <a-input-group size="default">
                <a-row :gutter="4">
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="user_name"  style="width: 150px">
                      <a-input
                          v-model="form1.user_name"
                          :placeholder="$t('index.name')"
                          size="default"
                      >
                        <a-icon
                            slot="prefix"
                            type="smile"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="account"  style="width: 150px">
                      <a-input
                          v-model="form1.account"
                          :placeholder="$t('index.username')"
                          size="default"
                      >
                        <a-icon
                            slot="prefix"
                            type="user"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-input-group>

              <!--              密码，确认密码-->
              <a-input-group size="default">
                <a-row :gutter="4">
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="password"  style="width: 150px">
                      <a-input
                          v-model="form1.password"
                          :placeholder="$t('index.password')"
                          size="default"
                          type="password"
                      >
                        <a-icon
                            slot="prefix"
                            type="key"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="checkPass"  style="width: 150px">
                      <a-input
                          v-model="form1.checkPass"
                          :placeholder="$t('index.checkPass')"
                          size="default"
                          type="password"
                      >
                        <a-icon
                            slot="prefix"
                            type="key"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-input-group>

              <!--          电话，邮箱-->
              <a-input-group size="default">
                <a-row :gutter="4">
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="phone"  style="width: 150px">
                      <a-input
                          v-model="form1.phone"
                          :placeholder="$t('index.phone')"
                          size="default"
                          type="phone"
                      >
                        <a-icon
                            slot="prefix"
                            type="phone"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="email"  style="width: 150px">
                      <a-input
                          v-model="form1.email"
                          :placeholder="$t('index.email')"
                          size="default"
                          type="email"
                      >
                        <a-icon
                            slot="prefix"
                            type="mail"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-input-group>

              <a-form-model-item   prop="kind"  style="width: 300px;height: 20px;">
                <a-radio-group v-model="form1.kind" size="small"  style="margin-left: 60px" @change="userKindChoice" >
                  <a-radio value="云工厂" >
                    {{$t('index.kind2') }}
                  </a-radio>
                  <a-radio value="经销商">
                    {{$t('index.kind1') }}
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>

              <!--工厂名称和简介-->
              <a-input-group size="default">
                <a-row :gutter="4">
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="f_name"  style="width: 150px">
                      <a-input
                          v-model="form1.f_name"
                          :placeholder="$t('index.factory')"
                          size="default"
                          :disabled="this.ban"
                      >
                        <a-icon
                            slot="prefix"
                            type="phone"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item class="Item inputbox" prop="f_brief"  style="width: 150px">
                      <a-input
                          v-model="form1.f_brief"
                          :placeholder="$t('index.brief')"
                          size="default"
                          :disabled="this.ban"
                      >
                        <a-icon
                            slot="prefix"
                            :style="{ fontSize: '16px', color: '#0088cc' }"
                        />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-input-group>

              <a-form-model-item class="Item inputbox">
                <a-button
                    type="primary"
                    html-type="submit"
                    class="btn"
                    size="large"
                    @click="onSubmit1('ruleForm1')"
                >{{$t('index.sure')}}</a-button>
              </a-form-model-item>
            </a-form-model>
          </div>

        </div>
        <!--页脚-->
        <div class="foot">
          Copyright ©2021-2022 {{$t('index.right')}} : Yin
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import $ from 'jquery'

export default {
  name: "Index",

  data() {
    return  {
      show1: true,
      form: {
        account: '',
        password: '',
        code: ''
      },
      form1: {
        account: 'vvv',
        password: 'asdasd',
        user_name: '测试商家',
        phone: '13940131336',
        email: '01016@qq.com',
        f_name: '商家名称',
        f_brief: '简介',
        kind: ''
      },
    }
  },
  computed:{
    rules(){
      return {
        account:[
          { required: true, message: this.$t('index.tipOfUsername'), trigger: 'blur' },
          { min: 1, max: 10, message: this.$t('index.tipOfUsername1'), trigger: 'blur' },
        ],
        password:[
          { required: true, message: this.$t('index.tipOfPassword'), trigger: 'blur' },
          { min: 1, max: 10, message: this.$t('index.tipOfUsername1'), trigger: 'blur' },
        ],
        code:[
          { required: true, message: this.$t('index.checkCode'), trigger: 'blur' },
        ],
      }
    },
    rules1(){
      return{
        account:[
          { required: true, message: this.$t('index.tipOfUsername'), trigger: 'blur' },
          { min: 1, max:10, message: this.$t('index.tipOfUsername1'), trigger: 'blur' },
        ],
        password: [
            { required: true, message: this.$t('index.tipOfPassword'), trigger: 'blur' },
          { min: 1, max: 10, message: this.$t('index.tipOfUsername1'), trigger: 'blur' },],
        checkPass: [
          { required: true, message: this.$t('index.tipOfPassword'), trigger: 'blur' },],
        user_name:[
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '请输入联系方式', trigger: 'blur' },
        ],
        email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        kind:[
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
      }
    }

  },
  created() {
    this.defaultValue = localStorage.lang || "cn";
  },
  methods:{

    async test() {
      const {data: res} = await this.$http.post("equipmentKind");
      console.log(res)
    },
    change(){
      if(this.show1){
        $("#loginDiv").fadeOut(1000);
        $("#registerDiv").fadeIn(3000);
        this.show1=!this.show1
      }else {
        $("#registerDiv").fadeOut(1000);
        $("#loginDiv").fadeIn(3000);
        this.show1=!this.show1
      }
    },
    // 切换多语言
    handleChange(val) {
      this.$i18n.locale =val;
    },
    onSubmit(){
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // 调用get请求

          //const {data: res} = await this.$http.post("login", this.form);
          const {data: res} = await this.$http.get("login",{
            params:{
              account:this.form.account,password:this.form.password,code:this.form.code
            }
            });
          if (res.flag == "ok") {
            window.sessionStorage.setItem('user', JSON.stringify(res.user)); // session 放置
            window.sessionStorage.setItem('token', 'pass'); // session 放置
            this.$message.success("登陆成功！！！");
            if(res.kind=="1"){
              this.$router.push({path: "/ClientIndex"});
            }else if(res.kind=="2"){
              this.$router.push({path: "/FactoryIndex"});
            }else {
              this.$router.push({path: "/AdminIndex"});
            }
          } else {
            this.$message.error(res.info)
            return false;
          }
        }
      }
      );
    },
    userKindChoice(){
      if(this.form1.kind=='经销商'){
        this.ban=true
      }else{
        this.ban=false
      }
    },
    onSubmit1(formName){
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const {data:res} = await this.$http.post("addUser",this.form1);
          if (res != "success") {
            this.addDialogVisible = false;
            return this.$message.error(res);
          }
          this.change()
          return  this.$message.success("注册成功！！！");

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style>

.body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-image: url("../assets/img/3.png");
}

.conbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  font-size: 30px;
  color: #fff;
  width: 60vw;
  display: flex;
  align-items: center;
}
.logo img {
  height: 80px;
  margin-right: 20px;
}

.smbox {
  width: 60vw;
  height: 60vh;
  background-color: #fff;
  margin: 40px 0px;
  box-shadow: 0px 0px 10px #000;
  background-image: url("../assets/img/bg.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
  position: relative;
}
.a-form-itembox {
  position: absolute;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  padding: 60px 80px;
}

.title {
  font-size: 20px;
}

.inputbox {
  width: 300px;
  box-sizing: border-box;
}

.inputsmbox {
  width: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
.btn {
  width: 300px;
}
.foot {
  color: #fff;
}
.copyright-a {
  text-decoration: none;
  color: #fff;
}
.copyright-a:hover {
  color: #fff;
}
.toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

</style>